<template>
  <div class="table-wrapper">
    <div class="search-container">
      <div class="search-wrapper">
        <span class="label">校区：</span>
        <el-select size="mini" v-model="params.baoxiu_school_id" placeholder="请选择校区" @change="getBxSearchAddress">
          <el-option v-for="item in schoolList" :key="item.name" :label="item.name" :value="item.val"></el-option>
        </el-select>
      </div>
      <div class="search-wrapper">
        <span class="label">楼宇：</span>
        <el-cascader size="mini" class="large-select" v-model="params.baoxiuAddress_id" :options="baoxiuAddressList" placeholder="请选择楼宇"
                     :props="{ checkStrictly: true, emitPath: false, multiple: true }"
                     :disabled="!params.baoxiu_school_id"
                     collapse-tags
                     clearable>
        </el-cascader>
      </div>
      <div class="search-wrapper">
        <span class="label">统计类型：</span>
        <el-select size="mini" v-model="params.chart_type" placeholder="请选择统计类型" @change="changeChartType">
          <el-option v-for="item in chartTypeList" :key="item.text" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="search-wrapper" v-if="params.chart_type===1">
        <span class="label">图形类型：</span>
        <el-select size="mini" v-model="graphicsType" placeholder="请选择图形类型">
          <el-option v-for="item in graphicsTypes" :key="item.text" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="search-wrapper" v-if="params.chart_type===2">
        <span class="label">图形类型：</span>
        <el-select size="mini" v-model="graphicsType" placeholder="请选择图形类型" @change="changeGraphicsType">
          <el-option key="pie" label="饼图" value="pie"></el-option>
          <el-option key="bar" label="柱状图" value="bar"></el-option>
          <el-option key="line" label="折线图" value="line"></el-option>
        </el-select>
      </div>
    </div>
    <div class="search-container">
      <div class="search-wrapper">
        <span class="label">时间类型：</span>
        <el-select size="mini" v-model="params.time_type" placeholder="请选择时间类型" @change="changeTimeType">
          <el-option v-for="item in timeTypeList" :key="item.text" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="search-wrapper">
        <span class="label">开始时间：</span>
        <el-date-picker
          size="mini"
          v-model="params.start_time"
          :type="params.time_type===1?'month':'year'"
          :value-format="params.time_type===1?'yyyy-MM':'yyyy'"
          placeholder="选择开始时间"
        >
        </el-date-picker>
      </div>
      <div class="search-wrapper">
        <span class="label">结束时间：</span>
        <el-date-picker
          size="mini"
          v-model="params.end_time"
          :type="params.time_type===1?'month':'year'"
          :value-format="params.time_type===1?'yyyy-MM':'yyyy'"
          placeholder="选择结束时间"
        >
        </el-date-picker>
      </div>
      <div class="search-wrapper">
        <el-button @click="getBxLyChart" icon="el-icon-search" size="mini" >查询</el-button>
      </div>
    </div>
    <common-chart class="common-chart big-search" :chart-type="graphicsType" size="big" :data="chart" v-if="params.chart_type===1&&option.type===1"></common-chart>
    <common-chart class="common-chart big-search" :chart-type="graphicsType" size="big" :data="chart1" v-if="params.chart_type===2&&option.type===2&&graphicsType==='pie'"></common-chart>
    <common-chart class="common-chart big-search" :chart-type="graphicsType" size="big" :data="chart2" v-if="params.chart_type===2&&option.type===2&&graphicsType!=='pie'"></common-chart>

  </div>
</template>

<script>
import CommonChart from '@/views/pages/components/CommonChart'
import portal from '@/api/portal'
export default {
  name: 'BxLyChart',
  data () {
    return {
      option: {
        type: 1
      },
      params: {
        baoxiu_school_id: null,
        baoxiuAddress_id: [],
        time_type: null,
        start_time: null,
        end_time: null,
        chart_type: null
      },
      schoolList: [],
      address: [],
      baoxiuAddressList: [],
      timeTypeList: [
        {
          text: '月',
          value: 1
        },
        {
          text: '年',
          value: 2
        }
      ],
      chartTypeList: [
        {
          text: '总量',
          value: 1
        },
        {
          text: '分类',
          value: 2
        }
      ],
      graphicsType: 'bar',
      graphicsTypes: [
        {
          text: '柱状图',
          value: 'bar'
        },
        {
          text: '折线图',
          value: 'line'
        }
      ],
      data: [],
      chart: {
        name: '维修楼宇分析',
        title: '',
        xAxis: [],
        legend: []
      },
      chart1: {
        name: '维修统计分析',
        series: [],
        tooltip: [],
        legend: []
      },
      chart2: {
        name: '维修统计分析',
        series: [],
        tooltip: [],
        legend: []
      },
      colors: ['#FF8955', '#FFD200', '#5d542a', '#EB811A', '#FF5454', '#0120EB', '#eb01d8']
    }
  },
  components: {
    CommonChart
  },
  created () {
    this.getBxSearchAddress()
    this.getBxSearch()
  },
  computed: {
  },
  mounted () {
  },
  methods: {
    changeChartType () {
      if (this.params.chart_type === 1) {
        this.graphicsType = 'bar'
      } else {
        this.graphicsType = 'pie'
      }
      this.option.type = null
      setTimeout(() => {
        this.option.type = this.params.chart_type
      })
    },
    changeTimeType () {
      this.params.start_time = null
      this.params.end_time = null
    },
    changeGraphicsType () {
      this.option.type = null
      setTimeout(() => {
        this.option.type = this.params.chart_type
        this.getBxLyChart()
      })
    },
    async getBxSearch () {
      const result = await portal.getBxSearch()
      if (result.data) {
        this.schoolList = result.data.baoxiu_school
      }
    },
    // 获取维修地址
    async getBxSearchAddress () {
      const params = {
        baoxiu_school_id: this.params.baoxiu_school_id
      }
      const result = await portal.getBxSearchAddress(params)
      if (result.data) {
        const baoxiuAddresss = result.data
        baoxiuAddresss.forEach(e => {
          e.label = e.text
          e.value = e.id
          e.disabled = true
          if (e.children) {
            e.children.forEach(el => {
              el.label = el.text
              el.value = el.id
              delete el.children
            })
          }
        })
        this.baoxiuAddressList = baoxiuAddresss
      }
    },
    async getBxLyChart () {
      if (!this.params.chart_type) {
        this.$message.warning('请选择统计类型')
        return
      }
      if (!this.params.time_type) {
        this.$message.warning('请选择时间类型')
        return
      }
      if (!this.params.start_time) {
        this.$message.warning('请选择开始时间')
        return
      }
      if (!this.params.end_time) {
        this.$message.warning('请选择结束时间')
        return
      }
      if (this.address.length) {
        this.params.baoxiuAddress_id = this.address[this.address.length - 1]
      }
      this.option.type = null
      const params = {
        baoxiu_school_id: this.params.baoxiu_school_id,
        baoxiuAddress_id: this.params.baoxiuAddress_id.join(),
        chart_type: this.params.chart_type,
        time_type: this.params.time_type,
        start_time: this.params.start_time,
        end_time: this.params.end_time
      }
      const res = await portal.getBxLyChart(params)
      if (res.data) {
        if (params.chart_type === 1) {
          const records = res.data
          const xAxisData = []
          const addressMap = {}
          records.forEach(e => {
            e.forEach((el, index) => {
              if (!index) {
                xAxisData.push(el.time)
              }
              if (!addressMap[el.baoxiuAddress]) {
                addressMap[el.baoxiuAddress] = []
              }
              addressMap[el.baoxiuAddress].push(el.count)
            })
          })
          const series = []
          const legend = []
          for (const key in addressMap) {
            legend.push(key)
            series.push(
              {
                type: 'bar',
                name: key,
                barWidth: '12%',
                label: {
                  show: true,
                  position: 'top',
                  textStyle: { color: '#fff', fontSize: 14, fontStyle: 'oblique' }
                },
                data: addressMap[key]
              }
            )
          }
          console.log(addressMap)
          this.chart.series = series
          this.chart.xAxis = [
            { data: xAxisData }
          ]
          this.chart.legend = legend
        } else {
          const records = res.data
          if (this.graphicsType === 'pie') {
            this.chart1.legend = ['土木', '电', '设备', '水', '房屋漏水', '卡机', '供暖']
            this.chart1.series = [{
              type: 'pie',
              radius: ['40%', '60%'],
              center: ['50%', '55%'],
              tooltip: {
                trigger: 'item',
                formatter: '{b}:{c}\n({d}%)'
              },
              label: {
                show: true,
                textStyle: { color: '#fff', fontSize: 18 },
                alignTo: 'edge',
                formatter: '{b}:{c}\n({d}%)'
              },
              data: records.map((ele, index) => {
                return {
                  value: ele.count,
                  name: ele.name,
                  itemStyle: { color: this.colors[index] }
                }
              })
            }]
            delete this.chart1.xAxis
          } else {
            const records = res.data
            const xAxisData = []
            records.forEach(e => {
              xAxisData.push(e.name)
            })
            const series = []
            series.push(
              {
                type: this.graphicsType,
                name: '总量',
                barWidth: '12%',
                label: {
                  show: true,
                  position: 'top',
                  textStyle: { color: '#fff', fontSize: 14, fontStyle: 'oblique' }
                },
                data: records.map(item => item.count)
              }
            )
            this.chart2.series = series
            this.chart2.xAxis = [
              { data: xAxisData }
            ]
          }
        }
      }
      setTimeout(() => {
        this.option.type = this.params.chart_type
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
